<script setup>
import { Back, User, Open, Position, Unlock, Lock} from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { userReguserService, userLoginService, userGetUserInfoService } from '@/api/user'
import { useUserStore } from '@/stores/index'
import selectVue from '@/components/select.vue'

const userStore = useUserStore()
const router = useRouter()
    defineOptions({
        name: 'loginIndex'
    })
    // 用户基本信息
    const userInfo = ref({
        id: '',
        username: '',
        password: '',
        repassword: ''
    })
    // 用户信息校验规则
    const userInfoRules = {
        id: [
            { required: true, message: '学号/工号不能为空', trigger: 'blur' },
            { pattern: /[0-9]+$/, message: '只能输入数字', trigger: 'blur'}
        ],
        username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            { pattern: /^.{2,8}$/, message: '请输入2~8为非空的字符', trigger: 'blur'}
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            { pattern: /^.{6,11}$/, message: '请输入6~11为非空的字符', trigger: 'blur'}
        ],
        repassword: [
            { required: true, message: '请再次输入密码', trigger: 'blur' },
            {
                validator: (rule, value, callback) => {
                    if (value !== userInfo.value.password) {
                        callback(new Error('输入的密码不一致'))
                    }
                    else {
                        callback()
                    }
                },
                trigger: 'blur'
            }
        ]
    }

    // 弹框状态
    const dialogVisible = ref(false)

    // 下拉菜单
    const selectbox = ref()

    // 切换登录注册的状态
    const status = ref(true)
    const goReg = () => {
        status.value = !status.value
        userInfo.value = {}
    }
    // 提供绑定表单的数据
    const userForm = ref()
    //登录按钮
    const login = async () => {
       await userForm.value.validate()
       const { data } = await userLoginService(userInfo.value)
       if (data.status === 1) return ElMessage.error(data.message)
       // 将token存入pinia中
       userStore.setToken(data.token)
       ElMessage.success(data.message)
       await getUserInfo()
       router.push('/layout')
    }

    // 注册按钮
    const reg = async () => {
        await userForm.value.validate()
        if (userInfo.value.id.length < 11 && userInfo.value.id.length > 3) {
            dialogVisible.value = !dialogVisible.value
        } else {
            const { data } = await userReguserService(userInfo.value)
            if (data.status === 1) return ElMessage.error(data.message)
            ElMessage.success(data.message)
            goReg()
        }
    }

    // 获取用户信息
    const getUserInfo = async() => {
    const { data } = await userGetUserInfoService()
    userStore.setUserInfo(data.data)
    }

    // 确认按钮 - 弹框关闭
    const handleClose = async() => {
        userInfo.value.job = selectbox.value.giveValue()
        const { data } = await userReguserService(userInfo.value)
            if (data.status === 1) return ElMessage.error(data.message)
            ElMessage.success(data.message)
            goReg()
        dialogVisible.value = !dialogVisible.value  
    }
</script>
<template>
    <div class="login">
        <el-row>
            <el-col class="left" :span="14">
            </el-col>
            <el-col class="right" :span="6" :offset="2">
                    <!-- 登录 -->
                <el-form v-if="status" ref="userForm" :model="userInfo" :rules="userInfoRules">
                    <el-form-item>
                        <h1>登录</h1>
                    </el-form-item>
                    <el-form-item prop="id">
                        <el-input v-model="userInfo.id" placeholder="请输入学号/工号" :prefix-icon="Position"></el-input>
                    </el-form-item>
                    <el-form-item prop="username">
                        <el-input v-model="userInfo.username" placeholder="请输入用户名" :prefix-icon="User"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="userInfo.password" placeholder="请输入密码" :prefix-icon="Lock" type="password"></el-input>
                    </el-form-item>
                    <el-form-item>
                       <div class="qiehuan">
                        <div class="item_left" @click="goReg">
                        <el-icon><Back /></el-icon>
                        <el-text class="mx-1">注册</el-text>
                       </div>
                        <div class="item_right">
                            <el-text class="mx-1" type="danger">忘记密码？</el-text>
                        </div>
                       </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" type="primary" @click="login">登录</el-button>
                    </el-form-item>
                </el-form>

                <!-- 注册 -->
                <el-form v-else ref="userForm" :model="userInfo" :rules="userInfoRules">
                    <el-form-item>
                        <h1>注册</h1>
                    </el-form-item>
                    <el-form-item prop="id">
                        <el-input v-model="userInfo.id" placeholder="请输入学号/工号" :prefix-icon="Position"></el-input>
                    </el-form-item>
                    <el-form-item prop="username">
                        <el-input v-model="userInfo.username" placeholder="请输入用户名" :prefix-icon="User"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="userInfo.password" placeholder="请输入密码" type="password" :prefix-icon="Unlock"></el-input>
                    </el-form-item>
                    <el-form-item prop="repassword">
                        <el-input v-model="userInfo.repassword" placeholder="请输再次入密码" type="password" :prefix-icon="Lock"></el-input>
                    </el-form-item>
                    <el-form-item>
                       <div class="qiehuan">
                        <div class="item_left" @click="goReg">
                        <el-icon><Back /></el-icon>
                        <el-text class="mx-1">登录</el-text>
                       </div>
                       </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" type="primary" @click="reg">注册</el-button>
                    </el-form-item>
                </el-form>

                <!-- 注册后老师选所受课程 -->
                <el-dialog
                    v-model="dialogVisible"
                    title="请选择所授科目"
                    width="30%"
                >
                    <span><selectVue ref="selectbox" style="width: 100%;"></selectVue></span>
                    <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="handleClose">确认</el-button>
                    </span>
                    </template>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
    .login {
        .left {
            background: url('@/assets/con-logo4.png') no-repeat 50% center / 500px auto, url('@/assets/login_bg.jpg') no-repeat center / cover;
            height: 100vh;
            border-radius: 16px;
        }
        .right {
            margin-top: 5%;
            .item_left, .item_right {
                cursor: pointer;
            }
            .qiehuan {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
            .btn {
                width: 100%;
                height: 40px;
            }
        }
    }

</style>